棋譜顯示與自動滾動優化

根據您的要求,以下是針對棋譜數字全形化以及歷史記錄自動滾動功能的修改建議。所有程式碼與注釋均已轉換為英文。

1. 定義全形數字陣列

在 NUM_ZH 定義下方新增 NUM_FULL 陣列,用於黑方的棋譜顯示:

JavaScript

// Chinese Digits for Red
const NUM_ZH = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
// Full-width Digits for Black
const NUM_FULL = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

2. 修改 getMoveNotation 函數

找到 getMoveNotation 函數,修改其中處理黑方座標與數值的邏輯(將 .toString() 替換為從 NUM_FULL 取值):

JavaScript

function getMoveNotation(pieceId, startX, startY, endX, endY, capturedId) {
   // ... (Keep existing prefix/logic code) ...

   if (colPieces.length > 1) {
       // ... (Keep samePieces sorting and prefix logic) ...
       
       if (isPawn && multiPawnCols.length > 1 && prefix !== '中') {
           // Use full-width digits for Black column if pawn ambiguity exists
           location = isRed ? NUM_ZH[startCol] : NUM_FULL[startCol];
       } else {
           location = name;
       }
   } else {
       prefix = name;
       // Updated: Use NUM_FULL instead of toString() for Black column
       location = isRed ? NUM_ZH[startCol] : NUM_FULL[startCol];
   }

   // 4. Action and Value
   let action = '';
   let val = 0;
   if (startY === endY) {
       action = '平';
       val = endCol;
   } else {
       const isAdvancing = isRed ? (startY > endY) : (startY < endY);
       action = isAdvancing ? '進' : '退';
       val = (['n', 'N', 'b', 'B', 'a', 'A', 'k', 'K'].includes(char)) ? endCol : Math.abs(startY - endY);
   }

   // Updated: Use NUM_FULL instead of toString() for the final value/column
   return prefix + location + action + (isRed ? NUM_ZH[val] : NUM_FULL[val]);
}

3. 修改 highlightActiveStep 函數

在 highlightActiveStep 中加入滾動邏輯,確保選中的步驟始終顯示在 .ejceesrecord 容器的可見區域:

JavaScript

function highlightActiveStep(index) {
   // Remove active class from all steps and the start banner
   document.querySelectorAll('.ejceesrcdstep').forEach(el => el.classList.remove('active'));
   const startDiv = document.getElementById('record-start');
   startDiv.classList.remove('active');

   let targetEl = null;
   if (index === 0) {
       // Highlight start banner if at step 0
       startDiv.classList.add('active');
       targetEl = startDiv;
   } else {
       // Highlight the specific move
       const el = document.getElementById(`step-record-${index}`);
       if (el) {
           el.classList.add('active');
           targetEl = el;
       }
   }

   // --- Added: Auto-scroll logic ---
   if (targetEl) {
       // scrollIntoView with 'nearest' ensures the element is visible
       // within its scrollable parent (.ejceesrecord) without unnecessary jumps.
       targetEl.scrollIntoView({
           behavior: 'smooth',
           block: 'nearest'
       });
   }
}

這些修改將解決黑方數字格式問題,並在使用者切換步數(點擊按鈕或拖動滑桿)時,讓對應的棋譜紀錄自動捲動到視野內。